<template>
	<view class="redemption">
		<view class="headers">
			<view class="one">
				输入您的兑换信息
			</view>
			<view class="two" style="margin-bottom:24rpx">
				<span class="two-font">您的户号：</span>
				<view class="" style="width: 77%;">
					<uv-input placeholder="请输入您缴费的户号" border="surround" v-model="card_number"></uv-input>
				</view>

			</view>
			<view class="two" style="margin-bottom:48rpx">
				<span class="two-font">发票号：</span>
				<view class="" style="width: 77%;">
					<uv-input placeholder="请输入您发票的后四位" border="surround" v-model="invoice_no"></uv-input>
				</view>

			</view>
			<view class="four" @click="chaxun()">
				查询
			</view>
		</view>
		<view class="content" v-html="instructions">

		</view>
		<view class="bottom">
			<view class="one">
				兑换记录
			</view>
			<view class="two">
				<view class="" v-if="list.length < 1">
					<image src="../../../static/images/wu.png" mode="widthFix" style="width: 304rpx;"></image>
				</view>
				<view class="" v-else>
					<view class="list-box" v-for="(item,index) in list" :key="index">
						<view class="text-box" style="padding-top: 24rpx;">
							<view class="text">
								缴费户号：{{item.card_number}}
							</view>
							<view class="right">
								发票后四位：{{item.invoice_no.substring(item.invoice_no.length - 4)}}
							</view>
						</view>
						<view class="text-box">
							<view class="text">
								发票金额：{{item.money}}
							</view>
							<view class="right">
								兑换数量：{{item.score}}
							</view>
						</view>
						<view class="text-box">
							兑换时间：{{item.pick_time}}
						</view>
					</view>
				</view>
			</view>
		</view>
		<uv-popup ref="popup" mode="center" @change="change" :round="20">
			<view class="log-box">
				<view class="one">
					查询结果
				</view>
				<view class="two">
					为您查询到一条记录，是否使用该记录兑换积分
				</view>
				<view class="third">
					<view class="text">
						缴费户号：{{log.card_number}}
					</view>
					<view class="text">
						发票号：{{log.invoice_no}}
					</view>
					<view class="text">
						发票金额：￥{{log.money}}
					</view>
				</view>

				<view class="four">
					<view class="left" @click="quxiao()">
						取消兑换
					</view>
					<view class="right" @click="queren(log.id)">
						确认兑换
					</view>
				</view>
			</view>
		</uv-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				instructions: '',
				list: [],
				card_number: '',
				invoice_no: '',
				log: {

				},
				logShow: false
			}
		},
		mounted() {
			this.getList()
			this.getInstructions()
		},
		methods: {
			getInstructions() {
				uni.request({
					url: '/wanlshop/order/instructions',
					success: res => {
						this.instructions = res.data
					}
				})
			},
			async chaxun() {

				let that = this
				await uni.request({
					url: '/wanlshop/user/chaPoints',
					data: {
						'card_number': that.card_number,
						'invoice_no': that.invoice_no,
					},
					success: res => {
						that.log = res.data
						this.$refs.popup.open();
					}
				})
			},
			quxiao(){
				this.$refs.popup.close();
			},
			async queren(id){
				let that = this
				await uni.request({
					url: '/wanlshop/user/addPoints',
					data: {
						'id':id,
					},
					success: res => {
						this.$refs.popup.close();
						uni.showToast({
							'icon':'success',
							'title':'添加成功',
							'duration':1500
						})
					}
				})
			},
			async getList(){
				await uni.request({
					url: '/wanlshop/user/pointsList',
					data: {
						
					},
					success: res => {
						this.list = res.data
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.redemption {
		margin: 0 24rpx;

		.headers {
			margin-top: 18rpx;
			width: 100%;

			background: #FFFFFF;
			border-radius: 20rpx 20rpx 20rpx 20rpx;
			display: flex;
			flex-direction: column;
			align-items: center;

			.one {

				font-weight: 500;
				font-size: 28rpx;
				color: #333333;
				margin-top: 34rpx;
				margin-bottom: 40rpx;
			}

			.two {
				display: flex;
				flex-direction: row;
				align-items: center;
				padding: 0 20px;
				width: 100%;
				justify-content: space-between;

				.two-font {
					font-weight: 400;
					font-size: 28rpx;
					color: #333333;
				}
			}

			.four {
				width: 498rpx;
				height: 70rpx;
				background: #FF2D2D;
				border-radius: 50rpx 50rpx 50rpx 50rpx;
				display: flex;
				justify-content: center;
				align-items: center;
				font-weight: 400;
				font-size: 30rpx;
				color: #FFFFFF;
				margin-bottom: 30rpx;
			}
		}

		.content {
			width: 702rpx;
			min-height: 284rpx;
			margin-top: 30rpx;
			background: #FFFFFF;
			border-radius: 20rpx 20rpx 20rpx 20rpx;
		}

		.bottom {
			margin-top: 30rpx;
			width: 702rpx;
			min-height: 502rpx;
			background: #FFFFFF;
			border-radius: 20rpx 20rpx 20rpx 20rpx;
			display: flex;
			flex-direction: column;
			align-items: center;

			.one {
				margin-top: 34rpx;
				margin-bottom: 48rpx;
				font-weight: 500;
				font-size: 28rpx;
				color: #333333;

			}
		}
	}

	.log-box {
		width: 630rpx;
		
		background: #FFFFFF;
		display: flex;
		flex-direction: column;
		align-items: center;

		.one {
			margin-top: 44rpx;
			margin-bottom: 50rpx;
			font-weight: 500;
			font-size: 36rpx;
			color: #333333;
		}

		.two {
			font-weight: 400;
			font-size: 24rpx;
			color: #666666;
			margin-bottom: 46rpx;
		}

		.third {
			font-weight: 400;
			font-size: 28rpx;
			color: #333333;

			.text {
				margin-bottom: 30rpx;
			}
		}

		.four {
			width: 100%;
			display: flex;
			justify-content: space-between;
			height: 98rpx;
			margin-top: 5rpx;
			.left {
				width: 50%;
				display: flex;
				align-items: center;
				justify-content: center;
				background: #F0F0F0;
				border-radius: 0rpx 0rpx 0rpx 20rpx;
				font-weight: 400;
				font-size: 28rpx;
				color: #333333;
			}

			.right {
				width: 50%;
				display: flex;
				align-items: center;
				justify-content: center;
				background: #FF5D5D;
				border-radius: 0rpx 0rpx 20rpx 0rpx;
				font-weight: 400;
				font-size: 28rpx;
				color: #FFFFFF;
			}
		}
	}
	.list-box{
		width: 666rpx;
		
		background: #F5F5F5;
		border-radius: 20rpx 20rpx 20rpx 20rpx;
		padding: 0 24rpx;
		.text-box{
			display: flex;
			    justify-content: space-between;
			    align-items: center;
				padding-bottom:  24rpx ;
				font-weight: 400;
				font-size: 26rpx;
				color: #333333;
				.right{
					min-width: 33%;
				}
		}
	}
</style>